<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>二维码生成器</title>
    <style>
      .form .label {
        display: flex;
        margin-bottom: 20px;
      }
      .form .label .txt {
        margin-right: 10px;
      }
      .btn {
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h1>二维码生成器</h1>
    <form class="form">
      <div class="label">
        <div class="txt">宽度 :</div>
        <input
          type="text"
          name=""
          id="width"
          placeholder="请输入宽度,默认200"
        />
      </div>
      <div class="label">
        <div class="txt">高度 :</div>
        <input
          type="text"
          name=""
          id="height"
          placeholder="请输入高度,默认200"
        />
      </div>
      <div class="label">
        <div class="txt">前景色 :</div>
        <input
          type="color"
          id="qiancolor"
          placeholder="请选择前景色,不选默认黑色"
        />
      </div>
      <div class="label">
        <div class="txt">背景色 :</div>
        <input
          type="color"
          id="backcolor"
          value="#ffffff"
          placeholder="请选择背景色,不选默认黑色"
        />
      </div>
      <div class="label">
        <div class="txt">内容 :</div>
        <input type="text" name="" id="content" placeholder="请输入内容" />
      </div>
      <div class="label">
        <div class="txt">图片地址 :</div>
        <!-- <input type="textarea" name="" cols="20" rows="10" placeholder="请输入图片地址,不填则使用默认图片" /> -->
        <textarea
          id="imgUrl"
          rows="10"
          cols="70"
          placeholder="请输入图片地址,不填则使用默认图片"
        ></textarea>
      </div>
    </form>
    <button class="btn">点击生成二维码</button>
    <div id="qrcode"></div>
    <img id="image" src="" />
  </body>
  <script src="./jquery.min.js"></script>
  <script src="./js/utf-8.js"></script>
  <script src="./js/jquery.qrcode.js"></script>
  <script>
    $(function () {
      $(".btn").click(function () {
        let width = $("#width").val();
        let height = $("#height").val();
        let content = $("#content").val();
        let imgUrl = $("#imgUrl").val();
        let qiancolor = $("#qiancolor").val();
        let backcolor = $("#backcolor").val();

        if (content == "") {
          alert("请输入内容");
          return;
        }
        $("#qrcode canvas").remove();
        jQuery("#qrcode").qrcode({
          render: "canvas", //设置渲染方式，有 table 和 canvas ，使用canvas方式渲染性能相对来说比较好
          text: content, //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
          width: width ? width : 200, //二维码的宽度(填了中间才有logo)
          height: height ? height : 200, //二维码的高度(填了中间才有logo)
          background: backcolor, //二维码的后景色
          foreground: qiancolor, //二维码的前景色
          src: imgUrl ? imgUrl : "./image/icon5.png", //二维码中间的图片
        });

        var image = document.getElementById("image");
        var canvas = document
          .getElementById("qrcode")
          .getElementsByTagName("canvas")[0];
        setTimeout(function () {
          image.src = canvas.toDataURL("image/png");
          $("#qrcode canvas").remove();
        }, 500);
      });
    });
  </script>
</html>
